<!--
 * @Description: 
 * @Date: 2023-12-20 14:44:03
 * @LastEditTime: 2024-04-24 09:22:57
-->
<template>
  <div class="dbxxFigure">
    <!-- <div>任免登记</div> -->
    <el-row :gutter="4" style="padding: 10px">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="107px"
        label-position="left"
        :border="true"
      >
        <el-col v-show="openType != 'view'" style="padding: 10px">
          <el-form-item prop="electType">
            <span style="font-size: 16px">任免类型</span>
            <el-button
              style="font-size: 16px"
              v-for="(item, index) in electTypeOptions"
              :key="index"
              :class="item.dictValue == formData.electType ? 'el-selected' : ''"
              :style="{
                marginLeft: '10px',
                width: '150px',
              }"
              @click="changeType(item.dictValue)"
              >{{ item.dictLabel }}</el-button
            >
          </el-form-item>
        </el-col>
        <!-- :labelStyle="{width: '123px'}" :contentStyle="{width:'42%'}" -->
        <table class="custom-table">
          <tr>
            <td
              v-show="openType != 'view'"
              class="custom-table-td custom-table-td-xs"
              style="width: 12%"
            >
              届次<span class="red">*</span>
            </td>
            <td v-show="openType != 'view'" colspan="2">
              <el-form-item prop="electionId">
                <el-select
                  id="input"
                  v-model="formData.electionId"
                  placeholder="请选择届次"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in electionOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs" style="width: 12%">
              会议名称<span class="red">*</span>
            </td>
            <td colspan="2">
              <el-form-item prop="conferenceName">
                <el-input
                  id="input"
                  v-model="formData.conferenceName"
                  size="mini"
                  placeholder="请输入会议名称"
                  clearable
                  style="border: none"
                >
                </el-input>
              </el-form-item>
            </td>
          </tr>

          <tr>
            <td class="custom-table-td custom-table-td-xs" style="width: 12%">
              文号
            </td>
            <td style="width: 18%">
              <el-form-item prop="documentNo">
                <el-input
                  id="input"
                  v-model="formData.documentNo"
                  placeholder="请输入文号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </td>
            <td
              v-show="openType != 'view'"
              class="custom-table-td custom-table-td-xs"
              style="width: 12%"
            >
              提请任免部门<span class="red">*</span>
            </td>
            <td
              v-show="openType == 'view'"
              class="custom-table-td custom-table-td-xs"
              style="width: 12%"
            >
              任免类别<span class="red">*</span>
            </td>
            <td style="width: 18%">
              <el-form-item
                v-show="openType != 'view'"
                prop="submitDepartmentId"
              >
                <el-select
                  id="input"
                  v-model="formData.submitDepartmentId"
                  placeholder="请选择下拉选择"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    :value="item.value"
                    :label="item.label"
                    :key="index"
                    v-for="(item, index) in submitDepartmentOptions"
                  ></el-option>
                </el-select>
              </el-form-item>
              <span v-show="openType == 'view'">{{
                formData.electDepartment
              }}</span>
            </td>
            <td class="custom-table-td custom-table-td-xs" style="width: 12%">
              任免时间
            </td>
            <td style="width: 18%">
              <el-form-item prop="electTime">
                <el-date-picker
                  id="input"
                  v-model="formData.electTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  placeholder="选择任免时间"
                >
                </el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="custom-table-td custom-table-td-xs" style="width: 12%">
              任免书编号<span class="red">*</span>
            </td>
            <td>
              <el-form-item prop="electDocumentNo">
                <el-input
                  id="input"
                  v-model="formData.electDocumentNo"
                  placeholder="请输入任免书编号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs">
              姓名<span class="red">*</span>
            </td>
            <td>
              <el-form-item prop="name">
                <el-input
                  id="input"
                  v-model="formData.name"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs">性别</td>
            <td class="custom-table-td">
              <el-form-item prop="sex">
                <el-radio v-model="formData.sex" :label="0">男</el-radio>
                <el-radio v-model="formData.sex" :label="1">女</el-radio>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="custom-table-td custom-table-td-xs">民族</td>
            <td>
              <el-form-item prop="nationality">
                <el-select
                  id="input"
                  v-model="formData.nationality"
                  placeholder="请选择民族"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in nationalityOptions"
                    :key="index"
                    :value="+item.dictValue"
                    :label="item.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs">籍贯</td>
            <td>
              <el-form-item prop="birthplace">
                <el-input
                  id="input"
                  v-model="formData.birthplace"
                  placeholder="请输入籍贯"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs">移动电话</td>
            <td>
              <el-form-item prop="phoneNo">
                <el-input
                  id="input"
                  v-model="formData.phoneNo"
                  placeholder="请输入移动电话"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="custom-table-td custom-table-td-xs">原单位</td>
            <td>
              <el-form-item prop="originPosition">
                <el-input
                  id="input"
                  v-model="formData.originPosition"
                  placeholder="请输入原单位"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
            <td class="custom-table-td custom-table-td-xs">原职务</td>
            <td colspan="3">
              <el-form-item prop="originDepartment">
                <el-input
                  id="input"
                  v-model="formData.originDepartment"
                  placeholder="请输入原职务"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr
            class="rz"
            v-if="formData.electType == '1' || formData.electType == '2'"
          >
            <td class="custom-table-td custom-table-td-xs">现单位</td>
            <td>
              <el-form-item prop="destPosition">
                <el-input
                  id="input"
                  v-model="formData.destPosition"
                  placeholder="请输入现单位"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
            <td class="custom-table-td listDatacustom-table-td-xs">现职务</td>
            <td colspan="3">
              <el-form-item prop="destDepartment">
                <el-input
                  id="input"
                  v-model="formData.destDepartment"
                  placeholder="请输入现职务"
                  clearable
                ></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="custom-table-td custom-table-td-xs">附件信息</td>
            <td colspan="5">
              <div class="custom-box">
                <div style="width: 100%">
                  <el-form-item
                    prop="field105"
                    style="width: 200px; margin-right: 20px"
                  >
                    <!-- <el-select
                      v-model="formData.field105"
                      placeholder="附件类型"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in field105Options"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select> -->
                  </el-form-item>
                  <!-- <fileUpload
                    v-if="formData.electType == '2'"
                    v-model="formData.file"
                    :isShowTip="false"
                  /> -->
                  <file-upload
                    v-show="openType != 'view'"
                    url="/prod-api/system/user/profile/avatar/local"
                    :formData="formData"
                    :fileName="fileName"
                  />
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="6">
              <div class="custom-input-block">
                <el-button
                  type="primary"
                  @click="submitForm"
                  v-show="openType == 'add'"
                  >立即创建</el-button
                >
                <el-button
                  type="primary"
                  @click="submitForm"
                  v-show="openType == 'edit'"
                  >修改</el-button
                >
                <el-button @click="goBack" v-show="openType == 'view'"
                  >返回</el-button
                >
              </div>
            </td>
          </tr>
        </table>
        <!-- 免职和离职展示 -->
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { listData } from "@/api/system/dict/data";
import {
  addElection,
  sessionList,
  deptList,
  editElection,
} from "@/api/register/appoint";
import FileUpload from "@/components/FileUpload2";
export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      // 表单数据
      formData: { sex: 0 },
      rules: {
        // 任免类型
        electType: [
          {
            required: true,
            message: "请选择任免类型",
            trigger: "blur",
          },
        ],
        electionId: [
          {
            required: true,
            message: "请选择界次",
            trigger: "blur",
          },
        ],
        conferenceName: [
          {
            required: true,
            message: "请输入会议名称",
            trigger: "change",
          },
        ],
        submitDepartmentId: [
          {
            required: true,
            message: "请选择提请任免部门",
            trigger: "change",
          },
        ],
        electDocumentNo: [
          {
            required: true,
            message: "请输入任免书编号",
            trigger: "change",
          },
        ],
        electDocumentNo: [
          {
            required: true,
            message: "请输入任免书编号",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "change",
          },
        ],
      },
      radio: 1,
      // 1、任免类型下拉框
      electTypeOptions: [],
      // 2、民族下拉框
      nationalityOptions: [],
      // 3、界次下拉框
      electionOptions: [],
      // 4、提请任免部门
      submitDepartmentOptions: [],
      // 文件名
      fileName: "",
    };
  },
  props: {
    // 可能是编辑 edit 或者 查看 view
    openType: { type: String, default: "add" },
    // 判断现在是不是打开弹窗
    visible: Boolean,
    // 当前选中的一行
    row: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      immediate: true,
      deep: true,
      handler(val) {
        // 如果是打开弹窗，此时需要回显值
        if (val) {
          let arr = [];
          if (this.row && this.row.filePath && this.openType == "edit") {
            arr = this.row.filePath.split("/");
            this.fileName = arr.reverse()[0];
          }
          this.formData = JSON.parse(JSON.stringify(this.row));
        }
      },
    },
  },
  mounted() {
    // 查询下拉框的码值，总共4个
    // 1、任免类型
    this.getList();
  },
  methods: {
    /** 查询字典数据列表 */
    getList() {
      let page = {
        pageNum: 1,
        pageSize: 10,
      };
      let queryParams1 = {
        ...page,
        // 任免类型
        dictType: "app_add_remove_type",
      };
      let queryParams2 = {
        pageNum: 1,
        pageSize: 100,
        // 民族
        dictType: "nationality",
      };
      // 任免类型
      listData(queryParams1).then((response) => {
        this.electTypeOptions = response.rows;
      });
      // 民族
      listData(queryParams2).then((response) => {
        this.nationalityOptions = response.rows;
      });
      // 界次

      sessionList().then((res) => {
        this.electionOptions = res.rows.map((item) => {
          let obj = {
            value: item.seId, // 界次id
            // 地区 + 界名称 + 次名称 (年度 )
            label: `${item.area}第 ${item.session}届人民代表大会第 ${item.orderName}次会议 (${item.annual})`,
          };
          return obj;
        });
      });
      // 提请任免部门
      deptList().then((res) => {
        this.submitDepartmentOptions = res.data.map((item) => {
          let obj = {
            value: item.deptId,
            label: item.deptName,
          };
          return obj;
        });
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        let api = this.openType == "edit" ? editElection : addElection;
        let msg = this.openType == "edit" ? "修改成功" : "创建成功";
        if (this.openType == "edit") {
          this.formData.id = this.row.id;
        }
        api(this.formData).then((res) => {
          if (res.code == 200) {
            if (this.openType == "edit") {
              this.$message({
                type: "success",
                message: msg,
              });
              // 关闭弹窗
              this.$emit("callback");
            } else {
              this.$message({
                type: "success",
                message: msg,
              });
              this.$refs.elForm.resetFields();
            }
          }
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    changeType(v) {
      this.$set(this.formData, "electType", v);
    },
    // 返回上一页
    goBack() {
      this.$emit("goBack");
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-left: 10px;
  width: 150px;
}

.fujian {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.custom-content {
  width: 95%;
  margin: 20px auto;
}

.custom-header {
  /*background-color: #F2F2F2;*/
  padding: 10px;
  border-radius: 5px;
}

.custom-header input {
  /*background-color: #F2F2F2;*/
}

.custom-title h3 {
  font-size: 20px;
  font-weight: bolder !important;
  color: #2a6ba5;
}

.custom-body {
  /*overflow-x: scroll;*/
  /*border:1px solid #f2f2f2;*/
  margin-top: 10px;
}

.layui-tab-item {
  overflow-y: auto;
  overflow-x: hidden;
}

.custom-footer {
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  width: 95%;
  position: absolute;
  bottom: 0;
  padding: 10px 0;
  text-align: center;
}

.custom-table {
  width: 100%;
  color: #666;
}

.custom-table td {
  padding-bottom: 10px;
  border: 1px solid #bbb;
  line-height: 40px;
  margin: 0;
}

/*.custom-table input{
        border: none;
    }*/

.custom-tab-title {
  text-align: center;
}

.custom-table-td {
  min-width: 80px;
  padding-left: 10px;
}

.custom-table-td-xs {
  width: 80px;
}

.custom-table-td-ms {
  width: 160px;
}

.layui-tab-content {
  padding: 15px !important;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.layui-input {
  /*height: 27px!important;*/
}

.layui-input-block {
  /* min-height: 27px;*/
  margin-left: 0;
}

.layui-tab-title .layui-this {
  color: #2a6ba5;
  background-color: #ffffff;
}

.layui-tab-title li {
  border-right: 1px solid #ffffff;
  color: #ffffff;
  height: 35px;
  line-height: 35px;
  background: #2a6ba5;
  margin-right: 3px;
}

.red {
  color: red;
}

.textarea-border-none {
  border: none;
}

.custom-input-block {
  padding: 5px 0;
  text-align: center;
}

.el-form-item--small.el-form-item {
  margin: 0;
}

::v-deep .el-form-item__content {
  margin: 0 !important;
}

::v-deep #input {
  border: none;
  font-size: 16px;
}

::v-deep .el-button {
  position: relative;
}

::v-deep .el-selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  border-color: transparent red red transparent;
}

.custom-table td[data-v-39af2900] {
  padding-bottom: 0;
}
</style>
